<template>
  <el-upload
    class="upload-excel"
    drag
    action="#"
    :auto-upload="false"
    :on-change="onChange"
    :file-list="fileList"
  >
    <i class="el-icon-upload green"></i>
    <div class="el-upload__text">
      将文件拖到此处，或
      <em>点击上传</em>
      <div class="el-upload__tip" slot="tip">上传Excel(最大15M)</div>
      <el-link type="danger" :underline="false">{{error}}</el-link>
    </div>
  </el-upload>
</template>

<script>
export default {
  props: ["importData"],
  data() {
    return {
      error: "",
      fileList: [],
      fileType: [
        "application/vnd.ms-excel",
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      ]
    };
  },
  methods: {
    onChange(file, fileList) {
      const isExcel = this.fileType.some(o => o === file.raw.type);
      const isLt15M = file.size / 1024 / 1024 < 15;

      if (!isExcel) {
        this.$message.error("只能上传Excel格式的文件!");
        fileList.pop();
        return;
      }
      if (!isLt15M) {
        this.$message.error("上传文件大小不能超过 15MB!");
        fileList.pop();
        return;
      }
      console.log(this.fileList,'xxxxx')
      this.fileList = fileList.slice(-1);
      this.$nextTick(_ => {
        this.$emit("getFile", this.fileList);
      });
    }
  }
};
</script>

<style lang="scss">
.upload-excel {
  .el-upload,
  .el-upload-dragger {
    width: 100%;
  }
}
</style>
<style lang="scss" scoped>
@import "styles/variables.scss";
.green {
  color: $green;
}
</style>
